<template>
    <div>
        <TitleBar class="absolute top-0 left-0 w-[450px]">车辆出入</TitleBar>
        <div class="main_box">
            <div class="box box_t">
                <div class="item box_t_1">
                    <div class="text_l_1">进入车辆</div>
                    <div class="text_l_2">345</div>
                    <div class="text_l_3">辆</div>
                </div>
                <div class="item box_t_2"><img :src="require('./assets/car_1.png')" alt=""></div>
                <div class="item box_t_3">
                    <div class="text_r_1">鄂A97364</div>
                    <div class="text_r_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;小区东门</div>
                    <div class="text_r_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>

                    <!-- <div class="text_r_2"><img :src="require('./assets/address-img.png')" alt=""> 小区东门</div>
                    <div class="text_r_3"><img :src="require('./assets/time-img.png')" alt="">2022.07.08 15:13:10</div> -->
                </div>
            </div>
            <div class="box box_b">
                <div class="item box_t_1">
                    <div class="text_l_1">离开车辆</div>
                    <div class="text_l_2">345</div>
                    <div class="text_l_3">辆</div>
                </div>
                <div class="item box_t_2"><img :src="require('./assets/car_1.png')" alt=""></div>
                <div class="item box_t_3">
                    <div class="text_r_1">鄂A97364</div>
                    <div class="text_r_2"><svg-icon icon-class="address-svg"/>&nbsp;&nbsp;小区东门</div>
                    <div class="text_r_3"><svg-icon icon-class="time-svg"/>&nbsp;&nbsp;2022.07.08 15:13:10</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'
export default defineComponent({
    components: {TitleBar}
})

</script>

<style scoped lang="scss">
    :deep .main_box{
        color: #E0F7FF;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;
        .box{
            width: 100%;
            height: 90px;
            // border: 1px solid #ccc;
            position: relative;
            .item{
                position: absolute;
                top: 0;
                // border: 1px solid #ccc;
                display: inline-block;
            }
        }
        .box_t{ 
            margin: 32px 0;
            .box_t_1{
                left: 0;
                width: 104px;
                height: 100%;
                background: url('./assets/bg.png') center/100% no-repeat;
                >div{
                    position: absolute;
                }
                .text_l_1{
                    top: 16px;
                    left: 22px;
                    font-size: 14px;
                }
                .text_l_2{
                    top: 49px;
                    left: 22px;
                    font-size: 20px;
                    font-weight: 600;
                    text-shadow: 0px 0px 6px rgba(224, 247, 255, 0.4);
                }
                .text_l_3{
                    top: 59px;
                    left: 65px;
                    font-size: 12px;
                    color: rgba(224, 247, 255, 0.8);
                }
            }
            .box_t_2{
                left: 104px;
                width: 160px;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .box_t_3{
                left: 264px;
                // width: 160px;
                height: 100%;
                padding-left: 12px;
                padding-top: 5px;
                .text_r_1{
                    font-size: 16px;
                }
                .text_r_2{
                    font-size: 12px;
                    margin: 12px 0 8px;
                    svg{
                        fill: none !important; 
                        font-size: 14px;
                        transform: translateY(2px);
                    }
                }
                .text_r_3{
                    font-size: 12px;
                    svg{
                        fill: none !important; 
                        font-size: 15px;
                        transform: translateY(1px);
                    }
                }
            }
        }
        .box_b{ 
            margin: 32px 0;
            .box_t_1{
                left: 0;
                width: 104px;
                height: 100%;
                background: url('./assets/bg.png') center/100% no-repeat;
                >div{
                    position: absolute;
                }
                .text_l_1{
                    top: 16px;
                    left: 22px;
                    font-size: 14px;
                }
                .text_l_2{
                    top: 49px;
                    left: 22px;
                    font-size: 20px;
                    font-weight: 600;
                    text-shadow: 0px 0px 6px rgba(224, 247, 255, 0.4);
                }
                .text_l_3{
                    top: 59px;
                    left: 65px;
                    font-size: 12px;
                    color: rgba(224, 247, 255, 0.8);
                }
            }
            .box_t_2{
                left: 104px;
                width: 160px;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .box_t_3{
                left: 264px;
                height: 100%;
                padding-left: 12px;
                padding-top: 5px;
                .text_r_1{
                    font-size: 16px;
                }
                .text_r_2{
                    font-size: 12px;
                    margin: 12px 0 8px;
                    svg{
                        fill: none !important; 
                        font-size: 14px;
                        transform: translateY(2px);
                    }
                }
                .text_r_3{
                    font-size: 12px;
                    svg{
                        fill: none !important; 
                        font-size: 15px;
                        transform: translateY(1px);

                    }
                }
            }
        }
    }
</style>